<!-- 阜新抽奖活动 -->
<template>
  <div class="wrap">
    <!-- <img
      src="../../assets/fx/banner.gif"
      class="banner"
      v-if="bannerState == 0"
    /> -->
    <img src="../../assets/fx/banner.png" class="banner" />
    <!-- 开奖倒计时  -->
    <div class="block-1" v-if="luckState == 0">
      <p class="title">开奖倒计时</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />
      <div class="luck-info">
        <p>开奖时间：{{ luckEndTime }}</p>
        <p>参与人数：{{ joinCounter }}人</p>
      </div>
      <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      <ul class="lock" style="margin-top: 0.4rem">
        <li>
          <p>日</p>
          <img src="../../assets/fx/lock.png" alt="" />
          <p>{{ d }}</p>
        </li>
        <img src="../../assets/fx/maohao.png" alt="" />
        <li>
          <p>时</p>
          <img src="../../assets/fx/lock.png" alt="" />
          <p>{{ h }}</p>
        </li>
        <img src="../../assets/fx/maohao.png" alt="" />

        <li>
          <p>分</p>
          <img src="../../assets/fx/lock.png" alt="" />
          <p>{{ m }}</p>
        </li>
        <img src="../../assets/fx/maohao.png" alt="" />

        <li>
          <p>秒</p>
          <img src="../../assets/fx/lock.png" alt="" />
          <p>{{ s }}</p>
        </li>
        <!-- <span>:</span> -->
      </ul>
    </div>
    <!-- 开奖结果 -->
    <div class="block-4" v-if="luckState == 1">
      <p class="title">中奖号码</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />
      <div class="luck-info">
        <p>开奖时间：{{ luckEndTime }}</p>
        <p>参与人数：{{ joinCounter }}人</p>
      </div>
      <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      <div class="t1" style="margin-top: 0.1rem">
        <p class="p0">一等奖</p>
        <div class="num-list">
          <p class="p1" v-for="(item, index) in luckCouponList_1" :key="index">
            {{ item }}
          </p>
        </div>
        <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      </div>
      <div class="t1" style="margin-top: 0.1rem">
        <p class="p0">二等奖</p>
        <div class="num-list">
          <p class="p2" v-for="(item, index) in luckCouponList_2" :key="index">
            {{ item }}
          </p>
        </div>
        <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      </div>
      <div class="t1" style="margin-top: 0.1rem">
        <p class="p0">三等奖</p>
        <div class="num-list">
          <p
            class="p3"
            v-for="(item, index) in luckCouponList_3"
            :key="index"
            style="color: #fff"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <div class="t1" style="margin-top: 0.1rem">
        <p class="p0">四等奖</p>
        <div class="num-list">
          <p
            class="p4"
            v-for="(item, index) in luckCouponList_4"
            :key="index"
            style="color: #fff"
            v-if="index < 8"
          >
            {{ item }}
          </p>
        </div>
        <div class="bot" @click="ckgd">
          <p>查看更多</p>
          <img src="../../assets/fx/right.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 待开奖  -->
    <div class="block-5" v-if="luckState == 2">
      <p class="title">即将开奖</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />
      <div class="luck-info">
        <p>开奖时间：{{ luckEndTime }}</p>
        <p>参与人数：{{ joinCounter }}人</p>
      </div>
      <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      <div class="icon5box" style="margin-top: 0.4rem">
        <img src="../../assets/fx/icon4.png" class="icon5" alt="" />
        <!-- <p>待开奖</p> -->
      </div>
      <div class="after">
        <p class="ts">11月30日晚上19:00来直播间</p>
        <p class="ts">观看现场直播抽奖</p>
        <p class="ts">更有加油券油卡，免费领</p>
      </div>
      <div class="code-box">
        <img src="../../assets/fx/ks.png" alt="" />
        <div>
          <div>
            <p>添加微信号</p>
            <p>cheyoufu520</p>
          </div>
          <div>
            <p>快手直播间</p>
            <p>cheyoufu520</p>
          </div>
        </div>
      </div>
    </div>

    <div class="block-2">
      <p class="title">我的锦鲤号</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />
      <div class="luck-info">
        <p></p>
        <div @click="more">
          <p>查看更多</p>
          <img src="../../assets/fx/right_b.png" alt="" />
        </div>
      </div>
      <!-- <img src="../../assets/fx/line.png" class="line" alt="" /> -->
      <div class="num-list" style="margin-top: 0.3rem">
        <div v-for="(item, index) in list" :key="index">
          <p
            v-if="index < 12"
            :class="
              item.isActiveluck == 1
                ? 'p1'
                : item.isActiveluck == 2
                ? 'p2'
                : item.isActiveluck == 3
                ? 'p3'
                : item.isActiveluck == 4
                ? 'p4'
                : ''
            "
          >
            {{ item.num }}
          </p>
        </div>
      </div>
    </div>
    <div class="block-3">
      <p class="title">开奖进度</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />
      <img src="../../assets/fx/jd.png" class="jd" alt="" />
    </div>
    <img src="../../assets/fx/gz-1.png" @click="gz" class="gz" alt="" />
    <div v-if="show" class="wrrapOvly">
      <van-loading type="circular" color="#FD8B66" size="60" vertical
        >加载中...</van-loading
      >
    </div>
    <div class="showModel" v-if="showModelState">
      <img src="../../assets/fx/null.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/luckInterface'
import { getUrlParams, formatTime } from '@/utils/local-storage'
export default {
  data () {
    return {
      bannerState: 1,
      phone: '',
      luckState: -1,
      joinCounter: 0,
      luckEndTime: '',
      jackpotStatus: 0,
      aid: '',
      d: '00',
      h: '00',
      m: '00',
      s: '00',
      timer: null,
      list: [],
      luckCouponList_1: [],
      luckCouponList_2: [],
      luckCouponList_3: [],
      luckCouponList_4: [],
      show: false,
      showModelState: false
    }
  },
  mounted () {
    document.title = "锦鲤抽奖"
    this.phone = getUrlParams('phone')
    this.aid = getUrlParams('aid')
    clearTimeout(timer1)
    this.show = true
    let timer1 = setTimeout(() => {
      clearTimeout(timer1)

      this.getActivityDetail()

    }, 2000)



  },
  methods: {
    more () {
      localStorage.setItem('nums', JSON.stringify(this.list))
      this.$router.push('/more')
    },
    gz () {
      this.$router.push('/guize')

    },
    ckgd () {
      localStorage.setItem('forelistData', JSON.stringify(this.luckCouponList_4))
      this.$router.push('/forelist')
    },
    getActivityDetail () {
      getDetail({ "activityId": this.aid, "phone": this.phone }).then(res => {
        this.joinCounter = res.data.result.joinCounter
        this.luckEndTime = formatTime(new Date(res.data.result.endTime), '/', 1)
        this.jackpotStatus = res.data.result.jackpotStatus
        let nowDate = new Date().getTime()
        let endDate = new Date(res.data.result.endTime).getTime()
        let startDate = new Date(res.data.result.startTime).getTime()
        let leftTime = endDate - nowDate;
        let rightTime = startDate - nowDate
        if (rightTime > 0) {
          this.showModelState = true
        } else {
          this.showModelState = false
        }

        if (leftTime <= 0) {
          if (this.jackpotStatus == 0) {
            this.luckState = 2
          } else {
            this.luckState = 1
          }
        } else {
          if (this.jackpotStatus == 0) {
            this.luckState = 0
          } else {
            this.luckState = 1
          }
        }

        if (this.jackpotStatus == 1) {
          res.data.result.memberGiftRecordByActivity.map(item => {
            if (item.giftName == 1) {
              this.luckCouponList_1.push(item.randomNumber)
            }
            if (item.giftName == 2) {
              this.luckCouponList_2.push(item.randomNumber)
            }
            if (item.giftName == 3) {
              this.luckCouponList_3.push(item.randomNumber)
            }
            if (item.giftName == 4) {
              this.luckCouponList_4.push(item.randomNumber)
            }
          })
        }
        if (res.data.result.randomNumbers && res.data.result.randomNumbers.length) {
          let arr = res.data.result.randomNumbers.split(',')
          this.list = []
          let result = []
          arr.map(item => {
            let isa = false
            this.luckCouponList_1.map(i => {

              if (i == item) {
                isa = true
                result.push({
                  num: item,
                  isActiveluck: 1,
                  sort: 0
                })
              }
            })
            this.luckCouponList_2.map(i => {

              if (i == item) {
                isa = true
                result.push({
                  num: item,
                  isActiveluck: 2,
                  sort: 1
                })
              }
            })
            this.luckCouponList_3.map(i => {
              if (i == item) {
                isa = true
                result.push({
                  num: item,
                  isActiveluck: 3,
                  sort: 2
                })
              }
            })
            this.luckCouponList_4.map(i => {
              if (i == item) {
                isa = true
                result.push({
                  num: item,
                  isActiveluck: 4,
                  sort: 3
                })
              }
            })
            if (!isa) {
              result.push({
                num: item,
                isActiveluck: 0,
                sort: 4
              })
            }

          })
          // 排序
          console.log(result.sort(this.compare('sort')))
          this.list = result.sort(this.compare('sort'))

        }
        this.timer = setInterval(() => {
          this.CountDown(formatTime(new Date(res.data.result.endTime), '/'))
        }, 1000)
        this.show = false
        this.bannerState = 0
        let timer2 = setTimeout(() => {
          this.bannerState = 1
          clearTimeout(timer2)
        }, 1000)
      })
    },
    compare (property) {//property:根据什么属性排序
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        /*
        * value2 - value1; ——> 降序
        * value1 - value2; ——> 升序
        */
        return value1 - value2;//升序排序
      }
    },
    // 格式化日期 解决ios和android 时间格式不一致的问题
    getTime (time) {
      return time.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/')
    },
    CountDown (date) {
      let now = new Date();
      let endDate = new Date(date);
      let leftTime = endDate.getTime() - now.getTime();//计算剩余的毫秒数
      if (leftTime <= 0) {
        if (this.jackpotStatus == 0) {
          this.luckState = 2
        }
        if (this.jackpotStatus == 1) {
          this.luckState = 1
        }
        leftTime = 0;
        clearInterval(this.timer)

      }
      let leftsecond = parseInt(leftTime / 1000);//计算剩余的秒数
      let day = Math.floor(leftsecond / (60 * 60 * 24));
      let hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
      let minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
      let second = Math.floor(leftTime / 1000 % 60, 10);
      const formatNumber = n => {
        n = n.toString()
        return n[1] ? n : '0' + n
      }
      this.d = formatNumber(day)
      this.h = formatNumber(hour)
      this.m = formatNumber(minute)
      this.s = formatNumber(second)
    }
    //直接调用即可


  }
}
</script>
<style scoped lang="scss">
.showModel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(#000, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    display: block;
    width: 90%;
  }
}
.bot {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 7px;
    height: 12px;
    display: block;
    margin-left: 5px;
  }
  p {
    color: #817f7d;
    font-size: 14px;
  }
}
* {
  margin: 0;
  padding: 0;
}
.link {
  padding: 0 0.9rem;
  margin-top: 0.4rem;
  div {
    margin-bottom: 0.4rem;
  }
  p {
    color: #333333;
    font-size: 0.22rem;

    line-height: 0.3rem;
  }
  a {
    color: #005fff;
    font-size: 0.22rem;
  }
}
.code-box {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 0 0.9rem;
  img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.24rem;
  }
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;

    div {
      margin-top: 10px;
      p:nth-of-type(1) {
        color: #333333;
        font-size: 0.22rem;
        margin-bottom: 0.1rem;
        line-height: 0.3rem;
        text-align: center;
      }
      p:nth-of-type(2) {
        color: #333333;
        font-size: 0.22rem;
        margin-bottom: 0.1rem;
        line-height: 0.3rem;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
.after {
  margin-top: 0.4rem;
  .ts {
    text-align: center;
    color: #cc382e;
    font-size: 0.36rem;
    line-height: 0.5rem;
    margin-bottom: 0.1rem;
  }
}
.wrrapOvly {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.7);
  overflow: hidden;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gz {
  width: 0.64rem;
  height: 1.65rem;
  position: fixed;
  top: 5.7rem;
  right: 0;
}
.num-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.28rem;
  margin-right: -0.1rem;
  p {
    background: url('../../assets/fx/textbg.png') no-repeat;
    background-size: cover;
    width: 1.46rem;
    height: 0.59rem;
    color: #fd8b66;
    font-size: 0.26rem;
    // text-align: center;
    // line-height: 0.59rem;
    margin-right: 0.1rem;
    margin-bottom: 0.26rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  p:nth-of-type(4n) {
    margin-right: 0rem;
  }
  div:nth-of-type(4n) {
    margin-right: 0rem;
  }
  .p1 {
    background: url('../../assets/fx/p1.png') no-repeat;
    background-size: cover;
    color: #fff;
    // background: red;
  }
  .p2 {
    background: url('../../assets/fx/p2.png') no-repeat;
    background-size: cover;
    color: #516ea3;
  }
  .p3 {
    background: url('../../assets/fx/p3.png') no-repeat;
    background-size: cover;
    color: #fff;
  }
  .p4 {
    background: url('../../assets/fx/p4.png') no-repeat;
    background-size: cover;
    color: #fff;
  }
}

.block-3 {
  position: relative;
  background: url('../../assets/fx/ju.png') no-repeat;
  background-size: cover;
  width: 6.7rem;
  height: 3.87rem;
  overflow: hidden;
  margin-top: 0.4rem;
  left: 0.4rem;
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
  .jd {
    width: 5.44rem;
    height: 1.06rem;
    display: block;
    margin: 0.3rem auto 0;
  }
}
.block-2 {
  position: relative;
  background: url('../../assets/fx/wdjl.png') no-repeat;
  background-size: cover;
  width: 6.7rem;
  height: 5.93rem;
  overflow: hidden;
  margin-top: 0.4rem;
  left: 0.4rem;
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
  .luck-info {
    display: flex;
    padding: 0 0.4rem;
    justify-content: space-between;
    > p {
      line-height: 0.3rem;
      color: #333;
      font-size: 0.22rem;
    }
    div {
      display: flex;
      align-items: center;
      p {
        color: #10aeff;
        font-size: 0.22rem;
      }
      img {
        display: block;
        width: 0.14rem;
        height: 0.23rem;
        margin-left: 0.1rem;
      }
    }
  }
}
.lock {
  display: flex;
  align-items: center;
  justify-content: center;
  > img {
    width: 0.09rem;
    height: 0.48rem;
    display: block;
    margin: 0.8rem 0.13rem 0;
  }
  li {
    position: relative;

    > p:nth-of-type(1) {
      color: #d51101;
      font-size: 0.24rem;
      width: 1.22rem;
      text-align: center;
      margin-bottom: 0.1rem;
      line-height: 0.33rem;
    }
    > p:nth-of-type(2) {
      color: #fff;
      font-size: 0.4rem;
      position: absolute;
      top: 0.3rem;
      left: 0.38rem;
      height: 2.2rem;

      line-height: 2.2rem;
    }
    img {
      width: 1.22rem;
      height: 1.53rem;
      display: block;
    }
  }
}
.block-1 {
  position: relative;
  background: url('../../assets/fx/djs.png') no-repeat;
  background-size: cover;
  width: 6.7rem;
  height: 5.6rem;
  overflow: hidden;
  margin-top: -0.8rem;
  left: 0.4rem;
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
  .luck-info {
    display: flex;
    padding: 0 0.4rem;
    justify-content: space-between;
    p:nth-of-type(1) {
      line-height: 0.3rem;
      color: #b5b5b5;
      font-size: 0.22rem;
    }
    p:nth-of-type(2) {
      line-height: 0.3rem;
      color: #ff2929;
      font-size: 0.22rem;
    }
  }
}
.block-4 {
  position: relative;
  background: url('../../assets/fx/icon-5-n.png') no-repeat;
  background-size: cover;
  width: 6.7rem;
  height: 18.51rem;
  overflow: hidden;
  margin-top: -0.8rem;
  left: 0.4rem;
  .t1 {
    // padding: 0 0.28rem;
    .p0 {
      color: #000000;
      font-size: 0.34rem;
      margin-left: 0.28rem;
      margin-bottom: 0.2rem;
    }
    .line {
      margin-bottom: 0;
    }
  }
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
  .luck-info {
    display: flex;
    padding: 0 0.4rem;
    justify-content: space-between;
    p:nth-of-type(1) {
      line-height: 0.3rem;
      color: #b5b5b5;
      font-size: 0.22rem;
    }
    p:nth-of-type(2) {
      line-height: 0.3rem;
      color: #ff2929;
      font-size: 0.22rem;
    }
  }
}
.block-5 {
  position: relative;
  background: url('../../assets/fx/icon3.png') no-repeat;
  background-size: cover;
  width: 6.7rem;
  height: 9.8rem;
  overflow: hidden;
  margin-top: -0.8rem;
  left: 0.4rem;
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
  .luck-info {
    display: flex;
    padding: 0 0.4rem;
    justify-content: space-between;
    p:nth-of-type(1) {
      line-height: 0.3rem;
      color: #b5b5b5;
      font-size: 0.22rem;
    }
    p:nth-of-type(2) {
      line-height: 0.3rem;
      color: #ff2929;
      font-size: 0.22rem;
    }
  }
  .icon5box {
    position: relative;
    width: 2.58rem;
    height: 1.39rem;
    margin: 0 auto;
    overflow: hidden;
    .icon5 {
      width: 2.58rem;
      height: 1.39rem;
      display: block;
      position: absolute;
    }
    p {
      color: #d51101;
      font-size: 0.46rem;
      text-align: center;
      margin-top: 0.78rem;
      line-height: 0.65rem;
      position: absolute;
      width: 5.86rem;
    }
  }
}
.banner {
  width: 100%;
  height: 7.5rem;
  display: block;
}
.wrap {
  background: #fadba0;
  min-height: 100vh;
  padding-bottom: 1.26rem;
}
</style>